<template>
    <admin-view>
        <admin-section>
            <admin-card>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="home()">日历</el-breadcrumb-item>
                    <el-breadcrumb-item>{{opts.ad_title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </admin-card>
        </admin-section>
        <admin-section>
            <admin-card>
                <el-row>
                    <el-col :span="16">
                        <div class="editable">
                            <el-form
                                    label-position="right"
                                    label-width="80px"
                                    size="medium"
                                    :model="opts"
                                    :rules="rules"
                                    ref="editor"
                            >
                                <el-form-item label="ID" v-if="status != 0">
                                    <div>{{opts.ad_id}}</div>
                                </el-form-item>
                                <el-form-item
                                        label="标题"
                                        prop="ad_title">
                                    <el-input
                                            v-model="opts.ad_title"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                        v-show="authorShow"
                                        label="作者"
                                        prop="ad_author">
                                    <el-input
                                            v-model="opts.author"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                        label="展示顺序"
                                        prop="ad_order"
                                        v-show="authorShow"
                                >
                                    <el-select
                                            v-model="opts.ad_order"
                                    >
                                        <el-option
                                                v-for="(name,index) in adOrders"
                                                :label="name" :key="index" :value="index"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="广告类型"
                                    prop="ad_type"
                                >
                                    <el-select
                                            v-model="opts.ad_type"
                                            disabled
                                        >
                                        <el-option
                                                v-for="(name,index) in adTypes"
                                                :label="name" :key="index" :value="index"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                        label="跳转类型"
                                        prop="link_type">
                                    <el-select
                                        v-model="opts.link_type"
                                    >
                                        <el-option
                                                v-for="(name,index) in linkTypes"
                                                :label="name" :key="index" :value="index" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                        label="跳转链接"
                                        prop="link">
                                    <el-input
                                        v-model="opts.link"
                                        :disabled="opts.link_type===0"
                                    ></el-input>
                                </el-form-item>
                                <el-form-item
                                        label="回调地址"
                                        prop="callback">
                                    <el-input ></el-input>
                                </el-form-item>
                                <el-form-item label="广告时间"
                                        prop="times">
                                    <admin-date-range
                                        :begin-time="opts.begin_time"
                                        :end-time="opts.end_time"
                                        @change="onChange"
                                    ></admin-date-range>
                                </el-form-item>
                                <el-form-item label="状态" prop="enable">
                                    <el-switch
                                            v-model="opts.enable"
                                    ></el-switch>
                                </el-form-item>
                                <el-form-item label="资源类型" prop="resource_type">
                                    <el-select
                                            v-model="opts.resource_type"
                                    >
                                        <el-option
                                                v-for="(name,index) in resourceTypes"
                                                :label="name" :key="index" :value="index" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="资源" prop="resource">
                                    <admin-file-upload
                                            zone="advert"
                                            v-model="opts.resource"
                                        @upload="onUpload">

                                    </admin-file-upload>
                                </el-form-item>
                                <el-form-item>
                                    <el-button @click="onSubmit" type="primary" >保存</el-button>
                                </el-form-item>
                            </el-form>
                        </div>

                    </el-col>
                    <el-col :span="8">
                        <admin-device :width="width" :height="height" :image="opts.resource"></admin-device>
                    </el-col>
                </el-row>
            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {Vue, Component,Watch} from 'vue-property-decorator'
    import {AdminView, AdminCard, AdminLabel, AdminSection} from '@/views/layout'
    import {Api} from "@/api/meta";
    import AdminDateRange from '@/views/controls/AdminDateRange'
    import AdminFileUpload from '@/views/controls/AdminFileUpload'
    import AdminDevice from '@/views/controls/AdminDevice'
    import moment from 'moment'

    @Component({
        name: 'AdminAdvertView',
        components: {
            AdminView,
            AdminCard,
            AdminLabel,
            AdminSection,
            AdminDateRange,
            AdminFileUpload,
            AdminDevice
        }
    })
    export default class AdminAdvertView extends Vue {

        selected:string = "";
        status: Number = 0;
        authorShow: Boolean = false;

        opts: Api.Meta.CreateAdvertRequest = {
            ad_id:"",
            ad_title:"",
            ad_type:0,
            link_type:0,
            link:"",
            callback:"",
            begin_time:"",
            end_time:"",
            enable:true,
            resource_type:0,
            resource:"",
            author:"",
            ad_order:1,
        };

        rules:Object = {};

        phoneURL: string = "";

        times:Array<Date> = [];

        linkTypes:Array<string> = [
            "无跳转",
            "URL"
        ];

        resourceTypes: Array<string> = [
            "图片",
        ];

        adTypes: Array<string> = [
            "开机屏",
            "明星Banner",
        ];

        adOrders: Array<string> = [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
        ];

        onUpload(url:string) {
            this.opts.resource = url
        }

        width: Number = 320;
        height: Number = 568;


        onSubmit() {
            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {

                if(valid) {
                    let loading = this.$loading({
                        target:this.$el,
                        lock:true,
                        text:"数据提交中"
                    });


                    if(this.status === 0) {
                        Api.Meta.CreateAdvert(this.opts)
                            .then((ack) => {
                                this.$message({
                                    type: "success",
                                    message: `创建成功[${ack.ad_id}]`,
                                });

                                loading.close();
                                this.opts.ad_id = ack.ad_id;
                                this.status = 1;
                                this.onGoHome()
                            })
                            .catch((err) => {
                                loading.close();
                            });
                    }else{

                        let opts = this.opts;
                        Api.Meta.SetAdvert({
                            ad_id:opts.ad_id,
                            ad_title:opts.ad_title,
                            link_type:opts.link_type,
                            link:opts.link,
                            callback:opts.callback,
                            begin_time:opts.begin_time,
                            end_time:opts.end_time,
                            enable:opts.enable,
                            resource_type:opts.resource_type,
                            resource:opts.resource,
                            author:opts.author,
                            ad_order:opts.ad_order
                        })
                            .then((ack) => {
                                this.$message({
                                    type: "success",
                                    message: `修改[${opts.ad_title}]成功`,
                                });

                                loading.close();
                                this.status = 1;
                                this.onGoHome()
                            })
                            .catch((err) => {
                                loading.close();
                            });
                    }
                }
            })
        }

        titleURL:string = "";

        onChange(begin:string,end:string) {
            this.opts.begin_time = begin;
            this.opts.end_time = end;
        }

        @Watch('opts.link_type')
        onLinkTypeChange(){
            this.loadRules()
        }
        loadRules() {

            this.rules = {
                    ad_title: [
                        {required:true, message:"标题不能为空"}
                    ],
                    ad_type: [
                        {required:false, message:""}
                    ],
                    link_type: [
                        {required:true, message:""}
                    ],
                    link:this.opts.link_type !== 0? [{required:true, message:"跳转地址不能为空"}] : [],
                    times: [{
                        required: true,
                        validator: (rule, value, callback) => {

                            if(!(this.opts.begin_time.length !== 0 && this.opts.end_time.length !== 0)) {
                                callback(new Error("请选择日期区间"))
                            }else{
                                callback()
                            }
                        }, trigger: 'blur' }
                    ],
                    enable:[{required:true, message:""}],
                    resource_type:[{
                        required:true,message:"请选择资源类型"
                    }],
                    resource:[{
                        required:true,validator: (rule, value, callback) => {

                            if(this.opts.resource.length === 0 ){
                                callback(new Error("请上传图片"))
                            }else{
                                callback()
                            }
                        }, trigger: 'blur'
                    }]
                }
        }

        loadView() {

            this.rules = {};

            Api.Meta.GetAdvert({
                ad_id:this.opts.ad_id,
            }).then((ack) => {
                this.opts = ack;

                if(this.opts.ad_type === 0) {
                    this.width = 320;
                    this.height = 568;
                }else if(this.opts.ad_type === 1) {
                    this.width = 320;
                    this.height = this.width * 0.45;
                }else if(this.opts.ad_type === 2) {
                    this.width = 320;
                    this.height = this.width * 0.45;
                }else if(this.opts.ad_type === 3) {
                    this.width = 320;
                    this.height = this.width * 0.6;
                }

                this.loadRules();
            });
        }


        created() {

            let type:any = this.$route.query['type'];

            if(type) {
                type = parseInt(type)
            }else{
                type = 0
            }

            if (type === 3) {
                this.authorShow = true;
            }

            this.opts.ad_type = type;

            let id = this.$route.params['id'];

            if(id === 'new') {
                this.opts.begin_time = this.$route.query['date'];
                this.status = 0;

            }else{
                this.status = 1;
                this.opts.ad_id = id;
                this.loadView()
            }
        }

        home() {
            let date = moment(this.opts.begin_time).format("YYYY-MM");
            return {
                path:`/advert/calendar/${this.opts.ad_type}?date=${date}`
            }
        }
        onGoHome() {


            this.$router.push(this.home())
        }

        mounted() {

        }
    }
</script>

<style lang="scss" scoped>

</style>